<template>
	<view>
		<view class="list-container-item">
			<view class="item-1">
				<view class="top-label" @click="retractItem">
					<view>从业人员</view>
					<view v-if="viewItem.show"><uv-icon name="arrow-down" size="35rpx" color="#000000"></uv-icon></view>
					<view v-else><uv-icon name="arrow-right" size="35rpx" color="#000000"></uv-icon></view>
				</view>
				<view class="info-1" v-if="viewItem.show">
					<view class="table-head">
						<view>序号</view>
						<view>姓名</view>
						<view>性别</view>
						<view>发证日期</view>
						<view>健康证明</view>
					</view>
					<view v-for="(item, index) in list" :key="index" class="table-bottom" v-if="list && list.length > 0">
						<view>{{ index + 1 }}</view>
						<view>{{ item.name }}</view>
						<view>{{ item.sex }}</view>
						<view>{{ item.date }}</view>
						<view class="tabel-img"><image :src="item.img"></image></view>
					</view>
					<view v-else class="tabel-no-data">
						<image src="../../../static/image/noData.png" class="no-data"></image>
						<view>暂无数据</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
const viewItem = reactive({ show: false });
const list = ref([
	{ name: '哈哈哈', sex: '0', date: '2025-03-20', img: '/static/image/index/login.jpg' },
	{ name: '哈哈哈', sex: '0', date: '2025-03-20', img: '/static/image/index/login.jpg' },
	{ name: '哈哈哈', sex: '0', date: '2025-03-20', img: '/static/image/index/login.jpg' }
]);
function retractItem() {
	viewItem.show = !viewItem.show;
}
</script>

<style lang="scss" scoped>
@import '@/static/css/dailycheck/viewIndex.scss';
@import '@/static/css/dailycheck/common.scss';
</style>
